<template>
  <div>
      <div class="main-picture">
        <el-carousel trigger="click" :interval="4000" type="card" height="300px">
          <el-carousel-item v-for="item in pictureList" :key="item">
            <img width="100%" height="100%" :src="item.psrc">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="main-title">
        <el-divider content-position="center">Food Recommend</el-divider>
      </div>
      <div class="main-food">
          <div class="main-food-list" v-for="(v,k) in foodList" :key="k">
            <div class="main-food-list-img">
              <img style="width: 100%;height: 100%;" :src=v.fimg>
            </div>
            <div class="main-food-list-container" style="margin-top: 10px">
              <span>{{v.fname}}</span>
              &nbsp;&nbsp;
              <span>{{v.fprice}}￥</span>
              &nbsp;&nbsp;
              <el-button @click="toDetail(v)" size="mini" type="primary" icon="el-icon-more"></el-button>
            </div>
          </div>
      </div>
  </div>
</template>

<script>

export default {
  name: "FoodIndex",
  data(){
    return{
      pictureList:[],
      foodList:[]
    }
  },
  methods:{
    toDetail(v){
      let agency = JSON.parse(sessionStorage.getItem("agency"));
      let boss = JSON.parse(sessionStorage.getItem("boss"));
      if (agency === null && boss === null) {
        this.$alert('您还没有登录，请登陆后再试', '温馨提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.$router.push("/login")
          }
        });
      }else{
        if (agency === null){
          location.href = "/productManager"
        }else{
          location.href = "/agencyManager"
        }
      }
    }
  },
  mounted() {
    axios({
      method:'get',
      url:'http://localhost:8081/rotation/getRotationList'
    }).then(res=>{
      this.pictureList = res.data.data
    }).catch(err=>{
      console.log(err)
    })
    axios({
      method:'get',
      url:'http://localhost:8081/foodRecommend/getRecommend'
    }).then(res=>{
      console.log(res)
      this.foodList = res.data.data
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.main-picture{
  display: flex;
  flex-direction: column;
}
.el-divider__text{
  font-size: 25px;
  color: #126bae;
  font-family: "Microsoft YaHei UI Light";
}

.main-food{
  width: 70%;
  height: 270px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.main-food-list,.main-food{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.main-food-list{
  width: 175px;
  height: 200px;
  margin: 15px;
}
.main-food-list-img{
  width: 100%;
  height: 150px;
}
.show-more-food{
  margin-left: 950px;
  margin-bottom: 20px;
}
</style>
